<template>
  <div class="setting-content">
    <h2 class="setting-header">
      <strong>通知设置</strong>
    </h2>
    <div class="content">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="消息设置" :name="1">
          <div class="block">
            <div class="row">
              <div class="label">站内信</div>
              <div class="desc">站内信</div>
              <div class="content">
                <el-switch
                  v-model="noticeSettingData.siteMsg.data"
                  style="--el-switch-on-color: #13ce66"
                />
              </div>
            </div>
            <div class="row">
              <div class="label">邮箱</div>
              <div class="desc">邮箱</div>
              <div class="content">
                <el-switch
                  v-model="noticeSettingData.email.data"
                  style="--el-switch-on-color: #13ce66"
                />
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="联系人设置" :name="2">
          <ContactPeople v-if="activeName == 2"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import ContactPeople from "@/views/personal/info/components/ContactPeople.vue"
import { getMsgSetting } from "@/api/personal/info/noticeSetting"

const activeName = ref(1)

const noticeSettingData = ref(null)
const getMsgSettingData = async () => {
  const res = await getMsgSetting()
  noticeSettingData.value = res.data
}
getMsgSettingData()

if(process.env.NODE_ENV === 'development') {
  noticeSettingData.value = {
    siteMsg: { //站内信
      data: true,
      updateTime: '2024-09-27 10:24:25'
    },
    email: { //邮箱
      data: false,
      updateTime: null
    }
  }
}
</script>
<style scoped lang='scss'>
.setting-content{
  .content{
    .block{
      background: rgb(255, 255, 255);
      font-family: PingFangSC;
      color: rgb(51, 51, 51);
      letter-spacing: 0px;
      .tip{
        padding: 0px 16px;
        font-weight: 500;
        color: rgb(128, 128, 128);
        line-height: 22px;
        margin-top: 16px;
      }
      .row{
        display: flex;
        padding: 15px 16px;
        line-height: 20px;
        border-bottom: 1px solid rgb(229, 229, 229);
        .label{
          width: 90px;
          font-weight: 500;
          margin-right: 24px;
        }
        .desc{
          width: 50%;
          color: rgb(128, 128, 128);
          margin-right: 24px;
        }
        .content{
          flex: 1 1 0%;
          span{
            i{
              margin-right: 5px;
              color: #333;
              font-size: 12px;
            }
          }
        }
        .aciton{
          color: rgb(0, 100, 200);
          cursor: pointer;
          min-width: 24px;
          margin-left: 24px;
        }
      }
    }
  }
}
</style>